﻿<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>考试页</title>
    <link rel="stylesheet" href="/home/static/layui/css/layui.css">
    <script src="/home/static/layui/layui.js"></script>
    <link rel="stylesheet" href="/home/css/exam.css">
    <script src="/home/static/jquery-3.2.1.min.js"></script>
    <script src="/home/static/vue.js"></script>
    <style>
        .list-item {
            display: inline-block;
            margin-right: 10px;
        }
        .list-enter-active, .list-leave-active {
            transition: all 1s;
        }
        .list-enter, .list-leave-to
            /* .list-leave-active for below version 2.1.8 */ {
            opacity: 0;
            transform: translateY(30px);
        }
    </style>
</head>
<body>
<header>
    <p>
        <span>商务英语、国际贸易系列教学软件，涵盖了教学资源、教学课程、考试和专业实习。 产品贯穿教学的整个过程，能够辅助老师教学，训练与考察学生的各个技能点，对提高学生的实践能力起到促进作用，帮助学生更快更好地适应工作岗位。</span></p>
    <a href="/" class="logo">Home</a>
</header>
<main id="app">
    <div class="loading" v-show="loading">

        <i class="layui-icon layui-anim layui-anim-loop layui-anim-rotate">&#xe63d;</i>

    </div>
    <div class="demos-buttons">
    <h3>考试类型</h3>
        <div v-for="item in categories"><a href="javascript:;" v-bind:class="{active:category == item}" class="submit" @click="category = item">@{{ item }}</a></div>
</div>
<section id="getintouch" >
    <div class="container" style="border-bottom: 0;">
        <h1>
            <span>@{{category}}</span>
        </h1>
    </div>
    <div class="container">
        <form class="contact" action="#" method="post" id="form">
            <transition-group name="list" tag="div">
                <div class="row clearfix" :key="index" v-if="category == item.category_name" v-for="(item,index) in questions">
                    <div class="lbl">
                        <label for="name">
                            @{{ item.question }}</label>
                    </div>
                    <div class="ctrl">
                        <input type="text" v-model="questions[index].input" placeholder="请输入答案">
                    </div>
                </div>
            </transition-group>
            <div class="row  clearfix">
                <div class="span10 offset2">
                    <button class="submit" @click="submit" type="button">提交答案</button>
                </div>
            </div>
        </form>
    </div>
</section>
</main>

<script>
    {{--function decode(text){--}}
        {{--var span = document.createElement('span');--}}
        {{--span.innerHTML = text;--}}
        {{--return span.innerText;--}}
    {{--}--}}
    {{--var a = decode('{{$res}}');--}}
    var a = '{!! $res !!}';
    a = JSON.parse(a);

    console.log(a);
    var vm  = new Vue({
        el:'#app',
        data:{
            allQuestion: a.data,
            categories: a.categories,
            category:'单证',
            loading: false
        },
        computed:{
            questions:function(){
                var res = [];
                for (var i = 0; i < this.allQuestion.length; i++){
                    if(this.allQuestion[i].category_name === this.category){
                        res.push(this.allQuestion[i]);
                    }
                }
                return res
            }
        },
        methods:{
            submit: function(){
                vm.loading = true;
                var res = {
                    error_ids: [],
                    score: 0
                };
                for (var i = 0; i < vm.questions.length; i++){
                    if(vm.questions[i].answer === vm.questions[i].input){
                        res.score += +vm.questions[i].goal
                    }else{
                        res.error_ids.push(vm.questions[i].id)
                    }
                }
                res.error_ids = res.error_ids.join(',');
                console.log(res);
                $.ajax({
                    type: 'post',
                    data:res,
                    success: function(res){
                        console.log(res);
                        vm.loading = false
                    }
                });
                layui.use('layer', function() { //独立版的layer无需执行这一句
                    var layer = layui.layer;
                    layer.open({
                        title:'成绩',
                        content:'考试成绩: ' + res.score
                    })
                });
            }
        }
    });
    vm.category = '单证';


    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>
</body>
</html>